<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Daxone - eCommerce Bootstrap 4 Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/vendor/line-awesome.css}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/themify.css}">
    <!-- othres CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins/animate.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/owl-carousel.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/slick.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/jquery-ui.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/layui/css/layui.css}">
	<style type="text/css">
		.circusee-count{
			width: 100%;
			background: green;
			color: white;
            text-align: center;
		}
        .auction-count{
            width: 100%;
            background: #C71C60;
            color: white;
            text-align: center;
        }
        .state-list li input{
            display: inline;
            width: 20px;
            height: 20px;
        }

        #searchbtn:hover{
            color:#999;
            transform: scale(2.0);
            cursor:pointer;
        }
	</style>
</head>

<body>
<!--服务名相关url：js，商品图片超链接和标题，form的action，加入收藏（goodutil.js）-->
    <div class="main-wrapper">
        <div th:include="headerfooter :: header"></div>
        <div class="shop-area pt-90 pb-90">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
<!--                        筛选栏-->
                        <div class="shop-topbar-wrapper">
                            <div class="shop-topbar-left">
                                <div class="view-mode nav">
                                    <a class="active" href="#shop-1" data-toggle="tab"></a>
                                </div>
                                <p>[[${goodTypeTitle}]]</p>
                            </div>
                            筛选表单
                            <form id="goodCondition" action="/good/goodlist" type="post">
                                <input type="hidden" id="goodType" name="goodType" th:value="${condition.goodType}">
                                <input type="hidden" id="currentPage" name="currentPage" th:value="${pageInfo.pageNum}">
                                <input type="hidden" id="searchContext" name="condition.searchContext" th:value="${condition.searchContext}">
                                <div class="product-sorting-wrapper">
                                    <div class="product-shorting shorting-style">
                                        <label>排序项:</label>
                                        <select name="orderedField">
                                            <option value=""></option>
                                            <option value="bidNo" th:selected="${condition.orderedField=='bidNo'}"> 出价次数</option>
                                            <option value="circuseeNo" th:selected="${condition.orderedField=='circuseeNo'}"> 围观人数</option>
                                            <option value="currentPrice" th:selected="${condition.orderedField=='startPrice'}"> 起拍价格</option>
                                        </select>
                                    </div>
                                    <div class="product-shorting shorting-style">
<!--                                        该模板使用js改变状态，会自动提交，所以全用选项-->
                                        <select name="desc">
                                            <option value="false" th:selected="${condition.desc!=true}">升序</option>
                                            <option value="true" th:selected="${condition.desc==true}">降序</option>
                                        </select>
                                    </div>
<!--                                    筛选选项-->
                                    <div class="product-show shorting-style">
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                                                选择商品状态
                                            </button>
                                            <div class="dropdown-menu">
                                                <ul class="state-list">
                                                    <li><input name="goodStates" value="2" th:checked="${#lists.contains(condition.goodStates, 2)}" type="checkbox"/>正在拍卖</li>
                                                    <li><input name="goodStates" value="3" th:checked="${#lists.contains(condition.goodStates, 3)}" type="checkbox"/>即将开拍</li>
                                                    <li><input name="goodStates" value="4" th:checked="${#lists.contains(condition.goodStates, 4)}" type="checkbox"/>流拍</li>
                                                    <li><input name="goodStates" value="5" th:checked="${#lists.contains(condition.goodStates, 5)}" type="checkbox"/>成交</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="submit" value="筛选"></input>
                                </div>
                            </form>

                        </div>
                        <div class="shop-bottom-area">
                            <div class="tab-content jump">
                                <div id="shop-1" class="tab-pane active">
                                    <div class="row">
                                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6" th:each="good:${pageInfo.list}">
                                            <div class="product-wrap mb-35">
                                                <div class="product-img mb-15">
                                                    <span class="price-dec font-dec">[[${good.goodState}]]</span>
                                                    <a th:href="@{/good/goodDetail.html(gid=${good.gid})}">
                                                        <img th:src="@{(${good.url})}" alt="product" />
                                                    </a>
                                                    <!-- 图片上弹出 -->
													<div class="product-action">
                                                        <a title="Wishlist" href="javascript:" th:onclick="|addCollection(${good.gid})|"><i class="la la-heart-o"></i></a>
                                                    </div>
                                                </div>
                                                <div class="product-content row">
													<div class="col-lg-8">
														<h4><a th:href="@{/good/goodDetail.html(gid=${good.gid})}">[[${good.title}]]</a></h4>
														<div class="price-addtocart">
														    <div class="product-price">
														        当前价：<span>[[${good.nowPrice}]]</span>
														    </div>
														</div>
														<div class="price-addtocart" th:if="${good.goodState==1}">
															[[${#dates.format(good.startTime,'MM-dd HH:mm')}]]开拍
														</div>
                                                        <div class="price-addtocart" th:if="${good.goodState==2||good.goodState==3}">
                                                            [[${#dates.format(good.durationSeconds*1000,'HH小时mm分')}]]结束
                                                        </div>
													</div>
                                                    <div class="col-lg-4">
                                                        <div class="circusee-count" th:if="${good.goodState==3}">
                                                            <span>[[${good.circuseeNo}]]</span><br/>
                                                            <span>人围观</span>
                                                        </div>
                                                        <div class="auction-count" th:if="${good.goodState==2||good.goodState==4||good.goodState==5}">
                                                            <span>[[${good.bidNo}]]</span><br/>
                                                            <span>人出价</span>
                                                        </div>
													</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="pagination-style text-center">
                                    <div id="pagination"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div th:include="headerfooter :: footer"></div>
    </div>
    <!-- JS
============================================ -->

    <!-- Modernizer JS -->
    <script th:src="@{/assets/js/vendor/modernizr-3.6.0.min.js}"></script>
    <!-- Modernizer JS -->
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <!-- Popper JS -->
    <script th:src="@{/assets/js/vendor/popper.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>

    <!-- Slick Slider JS -->
    <script th:src="@{/assets/js/plugins/countdown.js}"></script>
    <script th:src="@{/assets/js/plugins/counterup.js}"></script>
    <script th:src="@{/assets/js/plugins/images-loaded.js}"></script>
    <script th:src="@{/assets/js/plugins/isotope.js}"></script>
    <script th:src="@{/assets/js/plugins/instafeed.js}"></script>
    <script th:src="@{/assets/js/plugins/jquery-ui.js}"></script>
    <script th:src="@{/assets/js/plugins/jquery-ui-touch-punch.js}"></script>
    <script th:src="@{/assets/js/plugins/magnific-popup.js}"></script>
    <script th:src="@{/assets/js/plugins/owl-carousel.js}"></script>
    <script th:src="@{/assets/js/plugins/scrollup.js}"></script>
    <script th:src="@{/assets/js/plugins/waypoints.js}"></script>
    <script th:src="@{/assets/js/plugins/slick.js}"></script>
    <script th:src="@{/assets/js/plugins/wow.js}"></script>
    <script th:src="@{/assets/js/plugins/textillate.js}"></script>
    <script th:src="@{/assets/js/plugins/elevatezoom.js}"></script>
    <script th:src="@{/assets/js/plugins/sticky-sidebar.js}"></script>
    <script th:src="@{/assets/js/plugins/smoothscroll.js}"></script>
    <script th:src="@{/assets/layui/layui.js}"></script>
    <!-- Main JS -->
    <script th:src="@{/assets/js/main.js}"></script>
    <script th:src="@{/assets/js/goodutil.js}"></script>

    <script type="text/javascript">

        function getPage(pageNum) {
            $("#currentPage").val(pageNum);
            $("#goodCondition").submit();
        }

        $(function () {
            pagination([[${pageInfo.total}]],[[${pageInfo.pageNum}]],[[${pageInfo.pageSize}]]);
        });

        function searchgood(){
            var searchContext = $("#searchinput").val();
            $("#searchContext").val(searchContext);
            $("#goodCondition").submit();
        }
    </script>
</body>

</html>